import React from 'react';
import {useNavigate} from 'react-router-dom';
import { Button,  Form, Input ,message} from 'antd';
import BgImg from '../assets/images/login-reg/登录i-1.jpg'
import Logo from '../assets/images/login-reg/logo.png'
import User from '../assets/images/login-reg/user.png'
import loginApi from '../apis/login'
export default function register() {
    const navigate = useNavigate()
    const onFinish = (values) => {
        loginApi.login(values).then(res =>{
          if(res.data.code==1){
            message.success('登陆成功')
            localStorage.token=JSON.stringify(res.data.token)
            navigate('/index')
          }else{
            message.error(res.data.msg)
          }
        })
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div>
            <div>
                <img src={BgImg} className='bgImg' />
                <div className='regBox'>
                    <img src={Logo} alt="" className='logo' />
                    <div className='welcome'>Welcome To Login</div>
                    <div className='title'>欢迎登录考试系统</div>
                    <img src={User} alt="" className='user' />
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 8,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="账号"
                            name="phone"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入账号!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    )
}
